<template>
	<div>
		<div class="buy-info">
			<movie-detail :movieDetail="buyInfo" v-show="this.buyInfo.length!=0"></movie-detail>

			<van-tabs @click="onClick" sticky>
				<van-tab v-for="item in showDays" :key="item.date" :name="item.date" :title="item.date" color>
					<!-- 下拉菜单 -->
					<van-dropdown-menu active-color="#ee0a24" sticky>
						<!-- 全城 -->
						<van-dropdown-item title="全城" ref="item">
							<van-tabs>
								<van-tab title="商区">
									<van-tree-select :items="districts" :active-id.sync="activeId"
										:main-active-index.sync="activeIndex">
									</van-tree-select>
								</van-tab>
								<van-tab title="地铁站">
									<van-tree-select :items="subways" :active-id.sync="activeId"
										:main-active-index.sync="activeIndex">
									</van-tree-select>
								</van-tab>
							</van-tabs>
						</van-dropdown-item>
						<!-- 品牌 -->
						<van-dropdown-item title="品牌" ref="item" :options="brands" v-model="value"></van-dropdown-item>
						<!-- 筛选 -->
						<van-dropdown-item title="筛选" ref="item">
							<div class="screen">
								<cinema-screen :screenData="services"></cinema-screen>
								<cinema-screen :screenData="hallTypes"></cinema-screen>
							</div>

							<!-- <div class="special-btn">
                                <span class="btn border-half-px" @click="btn()">重置</span>
                                <span class="btn define-btn">确定</span>
                            </div> -->
						</van-dropdown-item>
					</van-dropdown-menu>
					<!-- 当天影院列表 -->
					<cinema-list :cinemas="cinemaList"></cinema-list>
				</van-tab>
			</van-tabs>


		</div>
		<van-loading size="30px" v-show="this.buyInfo.length==0" color="#f03d37">加载中...</van-loading>
	</div>
</template>

<script>
	// 引入电影详情组件
	import MovieDetail from '@/components/MovieDetail.vue'
	// 引入筛选组件
	import CinemaScreen from '@/components/CinemaScreen.vue'

	import CinemaList from '@/components/CinemaList.vue'

	export default {
		data() {
			return {
				id: this.$route.params.id,
				buyInfo: [],
				showDays: [],
				cinemaList: [],

				// vant组件数据
				value: 0,
				activeId: 1,
				activeIndex: 0,

				brands: [],
				districts: [],
				subways: [],
				hallTypes: [],
				services: [],
			}
		},
		created() {
			this.getBuyInfo()
			this.getShowDays()
			this.getfilterCinemas()
			this.getCinemaList()
		},
		methods: {
			async getBuyInfo() {
				let res = await this.axios.get('movie/intro?movieid=' + this.id)
				this.buyInfo = res.movie
				// console.log(this.buyInfo)
			},
			async getShowDays() {
				let res = await this.axios.get(`movie/showdays?movieId=${this.id}&cityId=20`)
				this.showDays = res.dates
				// console.log(this.showDays)
			},
			async getfilterCinemas() {
				let res = await this.axios.get('index/filterCinemas?ci=20')
				// console.log(res)

				// 地铁站数据
				let subway = res.subway.subItems
				this.subways = subway.map((item) => {
					item = {
						text: item.name + '(' + item.count + ')',
						dot: false,
						className: 'my-class',
						children: item.subItems.map((ele) => {
							item = {
								text: ele.name,
								id: ele.id
							}
							return item
						}),
					}
					return item
				});
				// 地区数据
				let district = res.district.subItems
				this.districts = district.map((item) => {
					item = {
						text: item.name + '(' + item.count + ')',
						dot: false,
						className: 'my-class',
						children: item.subItems.map((ele) => {
							item = {
								text: ele.name,
								id: ele.id
							}
							return item
						}),
					}
					return item
				});

				// 品牌数据
				let brand = res.brand.subItems
				this.brands = brand.map((item, index) => {
					brand = {
						text: item.name + '(' + item.count + ')',
						value: index,
						id: item.id
					}
					return brand
				})

				// 影院类型
				this.hallTypes = res.hallType
				// 影院服务
				this.services = res.service
			},
			async getCinemaList(value) {
				let res = await this.axios.get(
					'movie/select/cinemas?limit=20&offset=0&client=iphone&channelId=4&showDate=' + value +
					'&movieId=' + this.id +
					'&sort=distance&cityId=20&lat=23.135610180010865&lng=113.42416693422547&districtId=-1&lineId=-1&areaId=-1&stationId=-1&brandIds=%5B-1%5D&serviceIds=%5B-1%5D&hallTypeIds=%5B%22all%22%5D&languageIds=%5B%22all%22%5D&dimIds=%5B%22all%22%5D'
				)
				// console.log(res)
				this.cinemaList = res.cinemas
			},
			btn() {

			},
			onClick(name, title) {
				// console.log(name,title);
				this.getCinemaList(title)
			},
		},
		components: {
			MovieDetail,
			CinemaScreen,
			CinemaList,
		},
	}
</script>

<style lang="less" scoped>
	.screen {
		min-height: 150px;
		max-height: 381px;
		overflow: overlay;
	}

	.special-btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		height: 56px;
		width: 100%;
		background: #fff;

		.btn {
			display: inline-block;
			height: 34px;
			width: 67px;
			margin-left: 12px;
			margin-top: 11px;
			text-align: center;
			line-height: 34px;
			font-size: 14px;
			color: #666;

			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 200%;
				top: 0;
				left: 0;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				border: 1px solid #e5e5e5;
				-webkit-transform: scale(.5);
				transform: scale(.5);
				border-radius: 6px;
				box-sizing: border-box;
				pointer-events: none;
			}
		}

		.border-half-px {
			position: relative;
		}

		.define-btn {
			margin-right: 12px;
			background: #dd403b;
			border-radius: 3px;
			color: #fff;
		}
	}


	// 以下为vant2组件的样式穿透
	.van-overlay {
		position: relative;
	}

	.van-tab {
		width: 115px;
		margin-left: 4.5px;
		padding: 0px;
	}

	.van-tabs__line {
		bottom: 0px;
		width: 115px;
		height: 1px;
	}

	.van-tabs__nav--line {
		padding-bottom: 0px;
	}

	.van-dropdown-menu__bar {
		height: 40px;
		box-shadow: none;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
	}
</style>
